<template>
	<a-dropdown>
		<slot name="default"></slot>
		<template #overlay>
			<a-menu @click="handleClick">
				<a-menu-item key="activatedPage">
					{{ $t('common.exportexcel.current') }}
				</a-menu-item>
				<a-menu-item key="maxRowCount">
					{{ $t('common.exportexcel.all') }}
				</a-menu-item>
				<a-menu-item key="custom">
					<a-input-number
						v-model:value="startPage"
						:min="1"
						@click.stop
						:controls="false"
						@change="onChange('start')"
					></a-input-number
					>~
					<a-input-number
						v-model:value="endPage"
						:min="1"
						@click.stop
						:controls="false"
						@change="onChange('end')"
					></a-input-number>
					<span @click.stop="handleClick({ key: 'custom' })">GO</span>
				</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { ExportExcelProps } from './export-excel';

const props = defineProps(ExportExcelProps);

const emit = defineEmits<{
	(name: 'exportExcel', params: IParam): void;
}>();

const startPage = ref<number>(1);
const endPage = ref<number>(2);

const onChange = (type: string) => {
	if (type === 'start') {
		if (startPage.value >= endPage.value) {
			startPage.value = endPage.value - 1;
		}
	}
	if (type === 'end') {
		if (endPage.value >= startPage.value) {
			endPage.value = startPage.value + 1;
		}
	}
};

const handleClick = ({ key }: { key: string | number }) => {
	const params = { type: key };
	if (key === 'activatedPage') {
	}
	if (key === 'maxRowCount') {
	}
	if (key === 'custom') {
		Object.assign(params, {
			startPage: startPage.value,
			endPage: endPage.value,
		});
	}
	emit('exportExcel', params);
};
</script>
